<template>
  <div class="container">
    <Card style="margin-bottom: 20px; margin-top: 10px; margin-left: 10px; margin-right: 10px">
      <Row type="flex" justify="space-between" align="middle">
        <Col style="margin-left: 15px">
          <b>关键字</b>
          <Input style="width: 200px; margin-left: 15px" v-model="inputValue" />
          <b style="margin-left: 50px">状态</b>
          <Select style="width: 200px; margin-left: 15px" v-model="model1">
            <Option v-for="item in openList" :key="item.value" :value="item.value" :label="item.value" />
          </Select>
          <Button style="margin-left: 15px" @click="clearSubject">清除</Button>
          <Button type="primary" style="margin-left: 15px" @click="serachSubject">搜索</Button>
        </Col>
        <Col>
          <Button style="margin-right: 15px" type="error" @click="addSubject = true">
            <Icon type="md-create" />
            新增技巧
          </Button>
        </Col>
      </Row>
      <Row style="background: #f4f4f5; margin-top: 15px">
        <Col style="margin: 10px">
          <div style="color: #9093b1">
            <Icon type="md-information-circle" />
            <span>数据一共{{ sumList }}条</span>
          </div>
        </Col>
      </Row>
      <Table :columns="columns1" :data="data1" style="margin-top: 15px" size="small">
        <template slot-scope="obj" slot="createTime">
          <strong>{{ obj.row.createTime | moment('YYYY-MM-DD HH-mm-ss') }}</strong>
        </template>
        <template slot-scope="{ row }" slot="state">
          <strong>{{ row.state == 1 ? '已开启' : '已禁用' }}</strong>
        </template>
        <template slot="operation" slot-scope="{ row }">
          <Button type="text" size="small" style="margin-right: 5px;color: #40aaff" @click="dialogVisibles(row)">预览</Button>
          <Button type="text" size="small" style="margin-right: 5px; color: #40aaff" @click="isUse(row.id,row.state)">{{row.state === 1? '禁用':'启用'}}</Button>
          <Button type="text" size="small" style="margin-right: 5px" @click="showModal(row)" :disabled='!Boolean(row.state)' :class="{discolor:!Boolean(row.state),bluecolor:Boolean(row.state)}">修改</Button>
          <Button type="text" size="small" style="margin-right: 5px" @click="delSubject(row)" :disabled='!Boolean(row.state)' :class="{discolor:!Boolean(row.state),bluecolor:Boolean(row.state)}">删除</Button>
        </template>
      </Table>
      <Row type="flex" justify="end">
        <Page :total="sumtotal" size="small" show-elevator show-sizer @on-change="changeCounts" :current="page" @on-page-size-change="changePageSize" :page-size="pagesize" />
      </Row>
    </Card>
    <Modal v-model="modifySubject" title="修改标签" @on-ok="modifyOk" width='800' height='500'>
      <Form :model="formItem" :label-width="100" :rules="ruleValidate" ref="ruleForm">
        <FormItem label="文章标签" prop='title'>
          <Input v-model="formItem.title" placeholder="请输入文章标签"></Input>
        </FormItem>
        <FormItem label="文章内容" prop="articleBody" style="height:150px;margin-bottom:75px">
          <quill-editor v-model="formItem.articleBody" :options="editorOption" style="height: 150px" />
        </FormItem>
        <FormItem label="视频地址">
          <Input placeholder="请输入视频地址"></Input>
        </FormItem>
      </Form>
    </Modal>
    <addArticles :addSubject.sync="addSubject"></addArticles>
    <previewArticles :dialogVisible.sync="dialogVisible" :articles="articles"></previewArticles>
  </div>
</template>

<script>
import { list, remove, update, detail, changeState } from '@/api/hmmm/articles'
import { simple } from '@/api/hmmm/directorys'
import addArticles from '../components/articles-add.vue'
import previewArticles from '../components/articles-preview.vue'
export default {
  data () {
    return {
      columns1: [
        {
          title: '序号',
          type: 'index'
        },
        {
          title: '文章标题',
          key: 'title'
        },
        {
          title: '阅读数',
          key: 'visits'
        },
        {
          title: '录入人',
          key: 'username'
        },
        {
          title: '录入时间',
          slot: 'createTime',
          width: 150
        },
        {
          title: '状态',
          slot: 'state'
        },
        {
          title: '操作',
          slot: 'operation',
          width: 250
        }
      ],
      data1: [], // 标签数据
      sumList: '', // 数据一共多少条
      inputValue: '', // 搜索框的值
      modifySubject: false, // 修改标签弹窗
      addSubject: false, // 新增弹窗
      dialogVisible: false, // 预览弹窗
      articles: { // 点击预览拿到的那个的值
        title: '',
        createTime: '',
        username: '',
        visits: 0,
        articleBody: ''
      },
      formItem: {
        title: '',
        articleBody: '',
        videoURL: '',
        state: 1
      },
      ruleValidate: {
        title: [{ required: true, message: '标签不能为空', trigger: 'blur' }],
        articleBody: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }] // 数据验证
      },
      searchSub: {}, // 搜索参数的保存
      page: 1,
      pagesize: 10,
      sumtotal: 0,
      science: [], // 所属标签下拉框
      model1: '', // 状态下拉框
      openList: [ // 状态选项
        {
          value: '开启',
          label: '开启'
        },
        {
          value: '禁用',
          label: '禁用'
        }
      ],
      id: 0,
      editorOption: {
        //  富文本编辑器配置
        modules: {
          // 工具栏定义的
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
            ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
            ['image', 'link'] // 链接、图片、视频-----['link', 'image', 'video']
          ]
        },
        // 主题
        placeholder: ''
      }
    }
  },
  watch: {
    $route: function (newId, oldId) {
      if (newId !== oldId) {
        this.getRoleList()
      }
    }
  },
  created () {
    this.getRoleList()
  },
  components: {
    addArticles,
    previewArticles
  },
  methods: {
    // 获取标签列表数据
    async getRoleList () {
      console.log(this.$route.query)
      this.id = +this.$route.query.id
      console.log(Boolean(this.id))
      if (this.id) {
        const { data } = await list({ page: this.page, pagesize: this.pagesize, subjectID: this.id })
        console.log(data)
        this.data1 = data.items
        this.sumList = data.counts
        this.sumtotal = data.counts
      } else {
        const data2 = await list({ page: this.page, pagesize: this.pagesize })
        console.log(data2)
        this.data1 = data2.data.items
        this.sumList = data2.data.counts
        this.sumtotal = data2.data.counts
      }
    },
    // 删除标签
    async delSubject (data) {
      try {
        await this.$confirm('确定删除？')
        await remove(data)
        this.getRoleList()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 修改标签
    async showModal (data1) {
      const { data } = await detail(data1)
      console.log(data)
      this.formItem = data
      console.log(this.formItem)
      this.modifySubject = true
    },
    // 点击确定修改标签并渲染页面
    async modifyOk () {
      this.$refs.ruleForm.validate()
      await update(this.formItem)
      this.getRoleList()
      this.$Message.success('修改成功')
      this.modifySubject = false
    },
    // 搜索
    async serachSubject () {
      this.searchSub.keyword = this.inputValue
      console.log(this.searchSub.keyword)
      this.searchSub.state = this.model1 === '开启' ? 1 : 0
      const { data } = await list(this.searchSub)
      this.data1 = data.items
      this.sumList = data.counts
      this.sumtotal = data.counts
    },
    // 清除
    clearSubject () {
      this.inputValue = ''
      this.model1 = ''
      this.getRoleList()
    },
    // 页面跳转
    changeCounts (i) {
      this.page = i
      console.log(this.page)
      this.getRoleList()
    },
    changePageSize (s) {
      this.pagesize = s
      console.log(this.pagesize)
      this.getRoleList()
    },
    // 所属标签
    async polymerScience () {
      const { data } = await simple()
      this.science = data
      console.log(this.science)
    },
    // 状态
    async isUse (id, state) {
      // console.log(id)
      // console.log(state)
      if (state === 1) {
        await changeState({ id: id, state: 0 })
        this.$Message.success('操作成功')
        this.getRoleList()
      } else {
        await changeState({ id: id, state: 1 })
        this.$Message.success('操作成功')
        this.getRoleList()
      }
    },
    // 预览
    dialogVisibles (data) {
      // console.log(data)
      this.articles = data
      this.articles.articleBody = this.articles.articleBody.replace(/<[^<>]+>/g, '')
      console.log(this.articles)
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped >
/deep/.ivu-table th {
  color: #90a0c2;
  border-bottom: 1px solid gray;
}
.bluecolor {
  color:#40aaff
}
.discolor {
  color: #C4C9DB;
}
/deep/.ivu-modal-header {
  background-color: #409EFF !important;
}
/deep/.ivu-modal-header-inner {
  color: white !important;
}
/deep/.ivu-modal-content {
  height: 500px !important;
}
/deep/.ivu-row-end {
  margin-top: 40px;
}

</style>
